<template>
    <div>
        <nav-com title="收货地址" :showView='showView' @back="backHandler()"></nav-com>
        <van-form @submit="onSubmit">
            <van-cell-group>
                <van-field v-model='addressInfo.name' name='name' label-width='4rem' label='姓名' placeholder="收货人姓名" 
                    :rules="[{ required: true, message: '' },{validator:validatorName,message:'最大长度不能超过12个字符'}]"
                ></van-field>
                <van-field v-model='addressInfo.tel' name='tel' label-width='4rem' label='手机号' placeholder="收货人手机号" 
                    :rules="[{ required: true, message: '' },{validator:validatorphone,message:'格式不正确'}]"
                ></van-field>
                <van-field v-model='addressInfo.address' is-link readonly name='address' label-width='4rem' label='地区' 
                    @click='showArea=true'  placeholder="选择省/市/区" :rules="[{ required: true, message: '' }]"
                ></van-field>
                <van-field v-model='addressInfo.addressDetail'  name='addressDetail' label-width='4rem' label='详细地址' 
                    placeholder="街道门牌、楼层房间号等信息" 
                    :rules="[{ required: true, message: '' },{validator:validatorAddress,message:'最大长度不能超过66个字符'}]"
                ></van-field>
            </van-cell-group>
            <div style="margin:12px">
                <van-button round block type='danger' native-type='submit'>保存</van-button>
            </div>
            
        </van-form>
        <div style="margin:12px;">
            <van-button round block type='default'  @click='back_btn' >返回</van-button>
        </div>
        <van-popup v-model="showArea" round position='bottom'>
            <van-cascader v-model="cascaderValue" title='请选择所在地区' :options='options' @finish='onFinish' @close='showArea=false' />
        </van-popup>

    </div>
</template>
<script>
import {option} from '@/api/area'
import { postAdressManagesAPI,getAdressManagesAPI,putAdressManagesAPI } from '@/api/api'
import navCom from '@/component/nav'
export default {
    name:'add',
    components:{
        navCom
    },
    data() {
        return {
            showArea:false,
            options:option,
            showView:true,
            cascaderValue:'',
            addressInfo:{
                name:'',
                tel:'',
                province:'',
                city:'',
                county:'',
                addressDetail:'',
                areaCode:'',
                address:'',
            },
            uid: weixin.getUserId(),
            id:null,

        }
    },
    created(){
        this.init()
    },
    mounted(){
        this.init()
    },
    methods:{
        //返回
        backHandler(){
            this.$router.go(-1)
        },
        //初始化
        init(){
            if(this.uid==null){ return false}
            getAdressManagesAPI({uid:this.uid}).then(res=>{
                let data = res.data.data.rows[0]
                this.addressInfo.name = data.name,
                this.addressInfo.tel = data.cellphone,
                this.addressInfo.addressDetail = data.adressDetail,
                this.id = data.id
                this.addressInfo.address = data.province+'/'+data.city+'/'+data.district
                
            })
        },
        //判断姓名
        validatorName(val){
            if(val.length > 12) return false
        },
        //判断电话
        validatorphone(val){
            let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if(!reg.test(val)){
                return false
            }else{
                return true
            }
        },
        //详细地址
        validatorAddress(val){
            if(val.length > 66) return false
        },
        //地区选择完成
        onFinish(val){
            this.showArea = false
            this.addressInfo.address  = val.selectedOptions.map(item=>item.text).join('/')
        },
        //返回
        back_btn(){
            this.$dialog.confirm({
                message:'确定返回吗',
            }).then(()=>{
                history.back()
            }).catch(()=>{

            })
            
        },
        //保存
        onSubmit(val){
            let arr = val.address.split('/')
            let data = {
                id:this.id,
                uid:this.uid,
                name:val.name,
                cellphone:val.tel,
                province:arr[0],
                city:arr[1],
                district:arr[2],
                adressDetail:val.addressDetail,
                areaCode:'0'
            }
            if(this.id==null){
                //新建
                postAdressManagesAPI(data).then(res=>{
                    if(res.data.code==200){
                        history.back()
                    }else{
                        this.$dialog.alert({
                            message:res.data.msg
                        })
                    }
                })
            }else {
                //修改
                putAdressManagesAPI(data).then(res=>{
                    if(res.data.code==200){
                        history.back()
                    }else{
                        this.$dialog.alert({
                            message:res.data.msg
                        })
                    }
                    
                })
            }
        },

    }
}
</script>
<style scoped>

</style>
